<template>
  <view class="content">
    <!-- @click="newsBtn(item.id)" -->
    <view class="newsList" v-for="item in newsList" :key="item">

      <span class="title">{{item.name}}</span>
      <view style="margin-top:10rpx;" @click="androidOpenPdf(item.pdf)">{{item.name}} <span
          style="color:red;margin-left:10rpx;">点击查看PDF</span></view>
      <view class="videoTemp">
        <video object-fit="contain" :src="item.video"></video>
      </view>

    </view>
  </view>
</template>

<script>
import { introduction } from '../../api/user'
export default {
  data() {
    return {
      newsList: [],
      uuid: 0
    };
  },
  onLoad(options) {
    console.log(options.id, 'id');
    this.uuid = options.id
    this.getHome()
  },
  onShow() {

  },
  methods: {
    async getHome() {
      await introduction({ cate: this.uuid }).then(res => {
        console.log(res.data, '所有数据');
        if (res.data.length == 0) {
          uni.$u.toast('暂无赛事介绍');
        } else {
          this.newsList = res.data
        }
      })
    },
    newsBtn(e) {
      uni.navigateTo({
        url: '/pages/need/need?id=' + e
      })
    },
    //这里的 url 就是pdf文件的路径，直接调用此方法就可以打开pdf文件
    androidOpenPdf(url) {
      uni.downloadFile({
        url: url,
        success: function (res) {
          var filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            success: function (res) {
              console.log("打开文档成功");
            },
          });
        },
      });
    }

  }
}
</script>
<style>
page {
  background: #0056fe;
}
</style>
<style lang="scss">
.content {
  margin: 20rpx;
  //   border: 15rpx solid #fbfbfb;
  //   padding: 20rpx;
  .newsList {
    background: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    margin-bottom: 40rpx;

    .title {
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      font-size: 38rpx;
      color: #252d46;
      font-weight: bold;
    }

    .time {
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      font-size: 22rpx;
      color: $uni-text-color-grey;
      margin-top: 10rpx;
    }

    .videoTemp {
      margin-top: 20rpx;

      video {
        width: 100%;
        height: 350rpx;
      }
    }
  }
}
</style>
